<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/examples/package.js"></script>
</head>
<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a href="http://www.quizzpot.com/2009/03/paquetes-y-namespace/">Paquetes
						y namespace</a>
				</h2>
				<span class="smalltext">Mar 16, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/03/paquetes-y-namespace/#comments"
					title="Comment on Paquetes y namespace">8 Comments</a> | <a
					href="http://www.quizzpot.com/2009/04/packages-and-namespace/">Read
						in English</a>
				</span>
				<p>Es importante tener en cuenta que otros desarrolladores o
					usuarios pueden utilizar nuestro código, además de que necesitamos
					crear código que pueda ejecutarse con alguna otra librería sin
					tener ningún problema.</p>
			</div>
			<div class="tns">
				<div>
					<a href="http://www.quizzpot.com/2009/03/paquetes-y-namespace/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/03/namespace.jpg"
						alt="Paquetes y namespace"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix">
				<a
					href="http://www.quizzpot.com/wp-content/uploads/2009/03/package-src.zip"
					class="btn download"><span>Download</span></a>
			</p>
		</div>


		<p>En mi experiencia me ha tocado trabajar en proyectos donde las
			variables están declaradas en el “global scope” generando problemas
			realmente extraños y difíciles de rastrear, es en esos momentos
			cuando te das cuenta de la importancia de empaquetar nuestras
			aplicaciones.</p>
		<p>JavaScript no tiene un palabra reservada que nos permita
			empaquetar nuestros objetos como en lenguajes Java o C#, pero tomando
			en cuenta que los objetos pueden alojar otros objetos podemos
			solucionar este problema de la siguiente manera.</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Se&nbsp;crea&nbsp;el&nbsp;objeto&nbsp;com</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;com&nbsp;=&nbsp;{};&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="comment">//se&nbsp;le&nbsp;agrega&nbsp;el&nbsp;objeto&nbsp;quizzpot</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>com.quizzpot&nbsp;=&nbsp;{};&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//se&nbsp;crea&nbsp;el&nbsp;"paquete"</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>com.quizzpot.tutorial&nbsp;=&nbsp;{};&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//Se&nbsp;agrega&nbsp;un&nbsp;constructor&nbsp;de&nbsp;objetos</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>com.quizzpot.tutorial.Person&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(options){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.name&nbsp;=&nbsp;options.name;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//se&nbsp;crea&nbsp;una&nbsp;instancia</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;p&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;com.quizzpot.tutorial.Person({name:</span><span
						class="string">'John'</span><span>});&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="comment">//se&nbsp;imprime&nbsp;en&nbsp;consola</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>console.debug(p);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Se crea el objeto com
var com = {};
//se le agrega el objeto quizzpot
com.quizzpot = {};
//se crea el "paquete"
com.quizzpot.tutorial = {};
//Se agrega un constructor de objetos
com.quizzpot.tutorial.Person = function(options){
	this.name = options.name;
}
//se crea una instancia
var p = new com.quizzpot.tutorial.Person({name:'John'});
//se imprime en consola
console.debug(p);
</pre>
		<p>De esta manera se crea un espacio robusto de nombres, con esto
			nos evitaremos que alguien más cree un objeto “Person” y sobrescriba
			el nuestro.</p>
		<p>Si cada vez que creamos una función constructora creamos todo
			el paquete podemos sobrescribir paquetes existentes, para evitar esto
			debemos verificar si el paquete ya existe, de ser así utilizar el
			existente y agregar los que sean necesarios, eso lo hacemos de la
			siguiente manera:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//verificamos&nbsp;si&nbsp;existe&nbsp;la&nbsp;variable&nbsp;"com"&nbsp;para&nbsp;usarla,</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="comment">//si&nbsp;no&nbsp;existe&nbsp;creamos&nbsp;un&nbsp;objeto&nbsp;vacío</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;com&nbsp;=&nbsp;com&nbsp;||&nbsp;{};&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="comment">//hacemos&nbsp;el&nbsp;mismo&nbsp;procedimiento</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>com.quizzpot&nbsp;=&nbsp;com.quizzpot&nbsp;||&nbsp;{};&nbsp;&nbsp;</span></li>
				<li class=""><span>com.quizzpot.tutorial&nbsp;=&nbsp;com.quizzpot.tutorial&nbsp;||&nbsp;{};&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//creamos&nbsp;el&nbsp;constructor&nbsp;del&nbsp;objeto</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>com.quizzpot.tutorial.User&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(options){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.nickname&nbsp;=&nbsp;options.nickname;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//se&nbsp;crea&nbsp;una&nbsp;instancia</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;p&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;com.quizzpot.tutorial.Person({name:</span><span
						class="string">'John'</span><span>});&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;u&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;com.quizzpot.tutorial.User({nickname:</span><span
						class="string">'stock'</span><span>});&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="comment">//se&nbsp;imprime&nbsp;en&nbsp;consola</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(u);&nbsp;&nbsp;</span></li>
				<li class=""><span>console.debug(p);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//verificamos si existe la variable "com" para usarla,
//si no existe creamos un objeto vacío
var com = com || {};
//hacemos el mismo procedimiento
com.quizzpot = com.quizzpot || {};
com.quizzpot.tutorial = com.quizzpot.tutorial || {};

//creamos el constructor del objeto
com.quizzpot.tutorial.User = function(options){
	this.nickname = options.nickname;
}

//se crea una instancia
var p = new com.quizzpot.tutorial.Person({name:'John'});
var u = new com.quizzpot.tutorial.User({nickname:'stock'});
//se imprime en consola
console.debug(u);
console.debug(p);
</pre>
		<p>Para evitar todo el proceso de comparar la existencia de los
			objetos a la hora de formar los paquetes, podemos utilizar una
			herramienta de Ext JS, de la siguiente manera:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span>Ext.namespace(</span><span
						class="string">'com.quizzpot.tutorial'</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="comment">//o&nbsp;bien&nbsp;el&nbsp;siguiente&nbsp;atajo</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>Ext.ns(<span class="string">'com.quizzpot.tutorial'</span><span>);&nbsp;&nbsp;</span></span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">Ext.namespace('com.quizzpot.tutorial');
//o bien el siguiente atajo
Ext.ns('com.quizzpot.tutorial');
</pre>
		<p>De esta manera creamos el paquete deseado y si existe no lo
			sobrescribe, simplemente utiliza el anterior.</p>
		<h3>Conclusiones</h3>
		<p>Aunque en JavaScript no exista una palabra reservada para crear
			paquetes, como es el caso de otros lenguajes, si podemos implementar
			esta técnica ya que sí se puede alojar un objeto dentro de otro
			objeto. Es importante recordar que al definir el nombre de los
			“paquetes”, debemos verificar si existen para no sobreescribirlos.</p>
		<p>Cualquier sugerencia, duda o comentario es bienvenido y por
			supuesto los votos en Digg o en tu red social favorita.</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323139544412&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fpaquetes-y-namespace%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fpaquetes-y-namespace%2F&amp;text=Paquetes%20y%20namespace%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fpaquetes-y-namespace%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fpaquetes-y-namespace%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>
</body>
</html>